<template>
	<u-popup :show="visible" bgColor="transparent" mode="bottom">
		<view class="container-modal-share" :style="bodyBg">
			<view class="box-title">分享至
				<image class="icon-close" src="/static/share/delete@3x.png" @tap="onCancel"></image>
			</view>
			<view class="box-share">
				<view class="share-item" @tap="onShare('session')">
					<image class="img-item" src="/static/share/wechat@3x.png"></image>
					<view>微信好友</view>
				</view>
				<view class="share-item" @tap="onShare('timeline')">
					<image class="img-item" src="/static/share/moments@3x.png"></image>
					<view>微信朋友圈</view>
				</view>
				<view class="share-item" @tap="onShare('copy')">
					<image class="img-item" src="/static/share/link@3x.png"></image>
					<view>复制链接</view>
				</view>
			</view>
			<view class="box-bottom" @tap="onCancel">取消</view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue"
	import {
		showToast
	} from "@/utils/frameApi";
	const props = defineProps({
		title: {
			type: String,
			default: '旅游助手'
		},
		summary: {
			type: String,
			default: "您的AI私人助手"
		},
		imageUrl: {
			type: String,
			default: "https://duzikai4aigcugc5001.downline.cn/004_mobile_web_site_lite_mod__aigc_ugc/dist/img/logo@3x.1ec3bfe2.png"
		},
		link: {
			type: String,
			default: ""
		},
		visible: {
			type: Boolean,
			default: false
		},
		bodyBg:{
			type:Object,
			default:()=>{
				return{}
			}
		}
	})
	const emits = defineEmits(['update:visible', 'clickCallback'])

	const onCancel = () => {
		emits('update:visible', false)
		emits('clickCallback', false)
	}
	const onConfirm = () => {
		emits('update:visible', false)
		emits('clickCallback', true)
	}
	const onShare = (scene) => {
		// #ifdef APP-PLUS
		if (scene == 'copy') {
			uni.setClipboardData({
				data: props.link,
				showToast: false,
				success: function() {
					// console.log('success');
					showToast({
						title: '复制成功'
					})
					emits('update:visible', false)
				}
			});
			return;
		}
		let shareParams = {
			provider: "weixin",
			scene: "WXSceneTimeline",
			type: 0,
			href: props.link,
			title: props.title,
			summary: props.summary,
			imageUrl: props.imageUrl,
		}

		if (scene == 'session') {
			shareParams.scene = 'WXSceneSession';
		}
		if (scene == 'timeline') {
			shareParams.scene = "WXSceneTimeline"
		}
		uni.share({
			...shareParams,
			success: (res) => {
				emits('update:visible', false)
				console.log(res)
			},
			fail: (err) => {
				emits('update:visible', false)
				console.log(err, "err")
			},
			
		})

		// #endif
	}
</script>

<style lang="less" scoped>
	.container-modal-share {
		position: relative;
		width: 100%;
		background: #213343;
		border-radius: 48rpx 48rpx 0px 0px;
		box-sizing: border-box;

		.box-title {
			position: relative;
			width: 100%;
			padding: 40rpx 40rpx 0;
			line-height: 34rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			text-align: center;
			box-sizing: border-box;

			.icon-close {
				position: absolute;
				width: 28rpx;
				height: 28rpx;
				right: 40rpx;
				top: 50%;
				transform: translate(0, -50%);
				-webkit-transform: translate(0, -50%);
			}
		}

		.box-share {
			position: relative;
			width: 100%;
			padding-left: 40rpx;
			padding-right: 40rpx;
			margin-top: 72rpx;
			margin-bottom: 72rpx;
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			align-items: center;
			box-sizing: border-box;

			.share-item {
				position: relative;
				display: flex;
				display: -webkit-flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				line-height: 22rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				margin-right: 48rpx;

				&:last-child {
					margin-right: 0;
				}

				.img-item {
					position: relative;
					width: 120rpx;
					height: 120rpx;
					vertical-align: top;
					margin-bottom: 18rpx;
				}
			}
		}

		.box-bottom {
			position: relative;
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			text-align: center;
			border-top: 1px solid rgba(255, 255, 255, 0.06);
			box-sizing: border-box;
		}
	}
</style>